@extends("layouts.backend.webadmin")
@section('page-header')
<h1>
    <small>access\user</small>
</h1>
@endsection

@section('content')

<!-- Main content -->
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">

            <div class="box">
                <!--<div class="box-header">
                    <h3 class="box-title btn btn-primary add-row permission-add">增加</h3>
                </div>-->
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>

                        </tr>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<form id="add-form" method="post">
    <div id="add" style="display: none;" class="box box-success">
        <!--<div class="box-header with-border">
            <h3 class="box-title">添加节点</h3>
        </div>-->
        <div class="box-body">
            <input type="hidden" name="id">

            <div id="sort-order" style="display: none;" class="form-group">
                <label for="sort">排序</label>
                <input type="text" class="form-control" id="sort" placeholder="排序" name="sort">
            </div>
            <div class="form-group">
                <label for="code">名称code</label>
                <input type="text" class="form-control" id="code" placeholder="名称" name="code" readonly>
            </div>
            <div class="form-group">
                <label for="name">显示名称</label>
                <input type="text" class="form-control" id="name" placeholder="显示名称" name="name">
            </div>
            <div class="form-group modular">
                <label for="name">模块</label><br/>
                <select class="form-control" name="pid" id="modular">

                </select>
            </div>
            <div class="box-footer">
                <button id="submit-data" type="button" class="btn btn-primary ">确定</button>
            </div>
        </div>
        <!-- /.box-body -->
    </div>
</form>
<input type="hidden" name="modular" value="{{$modular}}">
@stop
@section('javascript-end')
<script src="{{env('APP_ROOT')}}/assets/layui/layui.all.js"></script>
<script src="{{env('APP_ROOT')}}/js/common.js"></script>
<script>
    $(function () {
        //模块
        var modular = $.parseJSON($('input[name="modular"]').val());
        var m1 = manage();
        //列表
        var tables = $('#example1').DataTable({
            'oLanguage'   :{
                'sUrl'    : '{{env("APP_ROOT")}}/assets/bootstrap/js/zh_cn.json'
            },
            "paging": true, // 禁止分页
            "bSort": false,//禁止排序
            "searching": false,
            "processing": true,
            //开启服务器模式
            serverSide: true,
            ajax: {
                //指定数据源
                url: "{{route('admin.access.permission.search')}}",
                type: "GET",
                data: function(d){
                    delete d.columns;
                    return d;
                },
                //接受服务器数据
                dataSrc:function(json){
                    getToken();
                    return json.data;
                }
            },
            pageLength: {{$pageNum}},
            //data值对应数据库字段名
            columns: [
                {
                    'title':'排序',
                    "data": "sort"
                },
                {
                    'title':'code',
                    "data": "code"
                },
                {
                    'title':'名称',
                    "data": "name"
                },
                {
                    'title':'创建时间',
                    "data": "created_at"
                },
                {
                    "title":"操作",
                    "targets": -2,
                    "data": null,
                    "render": function(data,type,row,meta){
                         var button = m1.button('permission');
                         return button[0];
                    }
                }],
            //所有列过滤xss
            columnDefs:[{
                "targets": "_all",
                "render": $.fn.dataTable.render.text()
            }]
        });
        //添加页面
        $('.add-row').click(function(){
            //重置表单
            $("#add-form")[0].reset();
            //排序隐藏
            $("#sort-order").css('display','none');
            //code可增加
            $(":input[id='code']").removeAttr('readonly');
            $("#submit-data2").attr('id','submit-data');
            //新增模块
            $(".modular").show();
            addLayer = layer.open({
                type:1,
                content:$("#add"),
                cancel:function(){
                    $('#add').hide();
                    //去除验证的表单附加样式
                    $("#add-form input").css('border','');
                },
                success:function(){
                    // console.log(modular)
                    $('#modular').html(m1.eachSelect(modular,'permission',''));
                }
            });
        });
        //新增
        $('#add-form').on('click','button#submit-data',function(){
            var fields = $("#add-form").serializeArray();
            $.ajax(
                {
                    url:"{{route('admin.access.permission.add')}}",
                    method:"GET",
                    data:fields
                }
            ).done(function(data){

                if(data.code===0){
                    layer.close(addLayer);
                    //刷新table跳转到首页
                    tables.ajax.reload();
                    //刷新当前页
                    // window.location.reload();
                    //隐藏表单
                    $('#add').hide();
                    layer.msg('操作成功');
                } else {
                    layer.msg(data.msg);
                }
            }).fail(function (data) {
                $.each(data.responseJSON, function (key, value) {
                    var input = '#add-form input[name=' + key + ']';
                    $(input).css("border","1px solid red");
                });
            });
        });
        //编辑页面
        $('#example1 tbody').on('click', 'button#editrow', function () {
            $("#submit-data").attr("id","submit-data2");
            //排序显示
            $("#sort-order").css('display','block');
            //code不可编辑
            $(":input[id='code']").attr('readonly','readonly');
            //模块不可编辑
            $(".modular").hide();
            $(":input[name='id']").show();
            var data = tables.row($(this).parents('tr')).data();
            var fields = $("#add-form").serializeArray();
            jQuery.each( fields, function(i, field){
                //jquery根据name属性查找
                $(":input[name='"+field.name+"']").val(data[field.name]);
            });
            //弹层页面
            editLayer = layer.open({
                    title:'编辑权限节点',
                    type:1,
                    content:$("#add"),
                    cancel:function(){
                        $("#add-form input").css('border','');
                        $('#add').hide();
                    }
                }
            );
        });
        //编辑提交
        $('#add-form').on('click','button#submit-data2',function(){
            fields = $("#add-form").serializeArray();
            $.ajax(
                {
                    url:"{{route('admin.access.permission.update')}}",
                    method:"POST",
                    data:fields,
                    headers:{'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')}
                }
            ).done(function(data){
                if(data.code===0){
                    getToken();
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('修改成功');
                        //关闭弹窗
                        layer.close(editLayer);
                        //刷新table跳转到首页
                        //刷新当前页
                        window.location.reload();
                    });
                }else{
                    layer.msg(data.msg);
                }
            }).fail(function(data){
                $.each(data.responseJSON, function (key, value) {
                    var input = '#add-form input[name=' + key + ']';
                    $(input).css("border","1px solid red");

                });
            });
        });
        //删除
        $('#example1 tbody').on( 'click', 'button#delrow', function () {
            var data = tables.row( $(this).parents('tr') ).data();
            $.ajax({
                url: "{{route('admin.access.permission.delete')}}",
                type: 'POST',
                data: {id: data.id},
                headers:{'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data) {
                if (data.code===0) {
                    getToken();
                    tables.ajax.reload();
                }else{
                    layer.msg(data.msg);
                }
            }).fail(function() {
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('服务器忙');

                });
            });
        });
    });
</script>
@endsection